<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="styles/bootstrap/css/bootstrap.css">
<link type="text/css" rel="stylesheet" href="styles/main.css">
<link type="text/css" rel="stylesheet" href="js/DataTables-1.9.4/media/css/jquery.dataTables.css">
<link type="text/css" rel="stylesheet" href="styles/jquery-ui-1.9.2.custom.css">
<link rel="icon" href="favicon.ico">
<title>BTC - Administraci&oacute;n</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/DataTables-1.9.4/media/js/jquery.dataTables.js" ></script>
<script type="text/javascript" src="js/jquery-ui-1.9.2.custom.js" ></script>
<script type="text/javascript" src="styles/bootstrap/js/bootstrap.js" ></script>

<script type="text/javascript">

    var currentPallet = null;

    function Pallet(id, clasificacion, bloquesDefectuosos, maquina, fecha) {
        this.id = id;
        this.fecha = fecha;
        this.clasificacion = clasificacion;
        this.bloquesDefectuosos = bloquesDefectuosos;
        this.maquina =  maquina;
    }

    $(function() {


        var pallets = new Array();

        $.ajax({
            type: "json",
            cache: false,
            url: "<s:url namespace='/json' action='list' />",
            success: function(data) {
                if (!data.error) {
                    var palletsJSON = data.pallets;
                    $(palletsJSON).each(function() {
                        var pallet = new Pallet(this.id, this.clasificacion, this.bloquesDefectuosos, this.maquina, this.fecha);
                        pallets.push(pallet);
                    })
                    crearTabla(pallets);
                    if (data.alerts) {
                        crearAlertas(data.alerts);
                    }
                    $(".detallesBloque").click(function() {
                        $("#detalleBloqueContainer").load("<s:url action='detailsBloque' />", {
                            palletId: $(this).attr("id")
                        }).dialog(getDialogOptions(450, 700, "Detalles del pallet", $(this).attr("id")));
                    });
                }

            },
            error: function() {
                crearTabla(pallets);
            }
        });

        function crearTabla(pallets) {

            function getIconoClasificacion(clasificacion) {
                switch (clasificacion) {
                    case "PRIMERA":
                        return "icon-ok-sign";
                    case "SEGUNDA":
                        return "icon-warning-sign";
                    case "INSERVIBLE":
                        return " icon-circle-arrow-down";
                    case "DESASTRE":
                        return " icon-fire";
                }
            }

            function getColorClasificacion(clasificacion) {
                switch (clasificacion) {
                    case "PRIMERA":
                        return "green";
                    case "SEGUNDA":
                        return "#FFFB6C";
                    case "INSERVIBLE":
                        return "orange";
                    case "DESASTRE":
                        return "red";
                }
            }


            var oLanguage = {"oPaginate":{"sFirst":"Primero", "sLast":"Ultimo", "sNext":"Siguiente", "sPrevious":"Anterior"},
                "sEmptyTable":"No hay registros", "sInfo":"_START_ a _END_ de _TOTAL_ registros",
                "sInfoEmpty":"", "sProcessing":"Procensando..."};
            var dataTablesOptions = {
                "oLanguage":oLanguage,
                "sDom":'<"H"lr>t<"F"ip>',
                "bLengthChange":false,
                "aaData":pallets,
                "bAutoWidth":false,
                "iDisplayLength":5,
                "sPaginationType":"full_numbers",
                "bFilter":true,
                "aoColumns":[
                    {    "bSearch":false, "sWidth":"15%", "sTitle":"ID",
                        "mDataProp":function (source, type, val) {
                            return source.id;
                        }
                    },
                    {    "bSearch":false, "sWidth":"15%", "sTitle":"Fecha",
                        "mDataProp":function (source, type, val) {
                            return source.fecha;
                        }
                    },

                    {    "bSearchable":false, "sWidth":"15%", "sTitle":"Maquina",
                        "mDataProp":function (source) {
                            return source.maquina;
                        } },
                    {    "bSearchable":false, "sWidth":"15%", "sTitle":"Defectuosos", "bSortable": false,
                        "mDataProp":function (source) {
                            return "<span class='detallesBloque' id='" + source.id + "' style='cursor: pointer'><i class='icon-plus-sign'></i>&nbsp;Ver detalles</span>";
                        } },
                    {    "sClass":"left", "sWidth":"40%", "sTitle":"Clasificaci&oacute;n",
                        "mDataProp":function (source, type, val) {
                            return "<i class='" + getIconoClasificacion(source.clasificacion) + "'></i>&nbsp;<span style='color: "+ getColorClasificacion(source.clasificacion) + "'>" + source.clasificacion + "</span>";
                        }
                    }
                ]
            };
            $("#palletsTable").dataTable(dataTablesOptions);
        }

        function crearAlertas(alerts) {
            var texto = "<strong>Cuidado!</strong> Las siguientes m&aacute;quinas est&aacute;n produciendo pallets defectuosos: "
            for (var i=0;i < alerts.length; i++) {
                texto += " <span style='font-size: larger;'>" + alerts[i] + "</span>";
            }
            var alert = "<div class='alert alert-error'><a class='close' data-dismiss='alert' href='#'>&times;</a>" + texto + "</div>"
            $(".alert").alert();
            $("#alertContainer").append(alert);
            $("#alertContainer").fadeIn();
        }

        function getDialogOptions(height, width, title, palletId) {
            var opcionesDialog = {
                bgiframe: true, height: height, width: width, modal: true, title: title,
                draggable: true, resizable: false, stack: true, autoOpen: true,
                open: function(event, ui) {
                    currentPallet = palletId;
                    window.setTimeout(function() {
                        jQuery(document).unbind('mousedown.dialog-overlay').unbind('mouseup.dialog-overlay');
                    }, 100);


                },
                close: function(event, ui) {

                }
            };
            return opcionesDialog;
        }

    });
</script>
</head>
<body>
<div class="navbar">
    <div class="navbar-inner">
        <a class="brand" href="#">BTC</a>
        <ul class="nav">
            <li class="active"><a href="#">Dimensiones</a></li>
            <li><s:a action="stats">Estad&iacute;sticas</s:a></li>
            <li><s:a action="generate">Generador</s:a></li>
        </ul>
    </div>
</div>
<div class="page-header">
    <h1>Dimensiones <small>pallets procesados</small></h1>
</div>
<div>
    <div id="alertContainer"></div>
    <div id="tableContainer">
        <table id="palletsTable"></table>
    </div>
    <div id="detalleBloqueContainer" style="display: none"></div>
</div>
</body>
</html>